<template>
    <div>
        <div class="m-container">
            <h3 class="m-center">我的购物车</h3>
            <div class="m-margin"></div>
            <van-card v-for="item in products" :key="item.id"
                      :num="item.quantity"
                      :price="item.price/100"
                      :desc="item.productName"
                      :title="item.productName"
                      :thumb="item.productImage">
                <template #num>
                    <van-stepper style="margin-bottom: 20px"
                                 v-model="item.quantity"
                                 theme="round"
                                 button-size="16"
                                 @plus="plus(item.quantity+1,item.productId)"
                                 @minus="minus(item.quantity-1,item.productId)"
                                 disable-input/>
                </template>
                <template #footer>
                    <van-button size="mini" @click="deleteProduct(item.productId)">删除</van-button>
                </template>
            </van-card>
        </div>

        <van-goods-action class="m-buy-btn">
            <van-goods-action-button
                    type="danger"
                    text="立即购买"
                    @click="onClickButton"
            />
        </van-goods-action>
        <Tabbar :show="2"/>
    </div>

</template>

<script>
    import Tabbar from "../../components/TabBar";
    import {Toast} from "vant"
    import {getCartList, productUpdate, productDelete} from "../../utils/apis";
    import storage from "../../utils/sessionUtils";

    export default {
        name: "ShoppingCart",
        data() {
            return {
                value: 1,
                products: []
            }
        },
        components: {Tabbar},
        created() {
            this.getCarts()
        },
        methods: {
            getCarts() {
                this.user = storage.get('userInfo')
                if (this.user === null) {
                    this.$router.push("login")
                    return
                }
                getCartList().then(res => {
                    this.products = res.data
                })
            },
            plus(amount, productId) {
                console.log("id:" + productId + ",amount:" + amount)
                productUpdate({
                    productId: productId,
                    count: amount
                }).then(res => {
                    console.log(res)
                })
            },
            minus(amount, productId) {
                console.log("id:" + productId + ",amount:" + amount)
                productUpdate({
                    productId: productId,
                    count: amount
                }).then(res => {
                    console.log(res)
                })
            },
            onClickButton() {
                this.$router.push("order_settle")
            },
            deleteProduct(productId) {
                productDelete({productId}).then(res => {
                    if (parseInt(res.status) === 10000) {
                        this.getCarts()
                        console.log(111)
                    }
                })
            }
        },
    }
</script>

<style scoped>
    .m-center {
        margin: 0;
        padding: 0;
        text-align: center;
        background: linear-gradient(to right, #ee0a24, #ff6034);
        /*border-radius: 10px 10px 10px 10px;*/
        color: #f7f8fa;
        position: fixed;
        line-height: 40px;
        top: 0;
        width: 387px;
        z-index: 99;
    }

    .m-active {
        border: 1px solid #1890ff;
    }

    .m-margin {
        margin-top: 40px;
    }

    .m-container {
        padding: 0 12px;
        margin-bottom: 100px;
    }

    .m-buy-btn {
        position: fixed;
        top: calc(100% - 100px);
    }
</style>
